<template>
<div class="card-batch">
  <span v-for="item in batch.operator" class="option-wrap">
    <!--复杂批量处理，通过slot在父组件写-->
    <slot :name="item.popover" v-if="item.popover" :item="item"></slot>
    <el-tooltip  v-else class="item" effect="dark" :disabled="!item.enabled" :content="item.tooltipContent" placement="top-start">
      <span class="option" @click="handlerClick(item.action, item.enabled)" :class="!item.enabled ? '': 'disabled'">
        <i :class="item.class"></i>{{$t(item.name)}}
      </span>
    </el-tooltip>
    <slot :name="item.action"></slot>
  </span>
  <span class="count">{{$t('public.already')}}<b>{{ batch.checkedCount }}</b>{{$t('public.term')}} <i class="el-icon-close"  @click="checkNone()"></i></span>
</div>
</template>
<script type="text/javascript">
  /**
   * CardBatch 卡片列表批处理组件
   * @author liujing
   * @path @/components/public-modules/card/CardBatch.vue
   *
   * @property {Object} batchOperator - 当前业务下的批量操作
   * @property {string} tabType - 当前业务
   *
   * @example
   *  <card-batch v-if="batchOperator"
      :tabType="tabType"
      :batchOperator="[
              {
                name: 'public.export',
                class: 'icon-daochu1',
                action: 'exportExcel'
              },
              {
                name: 'public.exportTask',
                class: 'icon-piliang',
                action: 'exportTask'
              }
            ]"
      @exportExcel="exportExcel"
      @exportTask="exportTask"
      @checkNone="checkNone"
      ></card-batch>
   */
  export default {
    name: 'CardBatch',
    props: {
      tabType: String,
      batchOperator: Object
    },
    data () {
      return {
        loading: true,
        checked: false,
        isCheckbox: false,
        isCall: true,
        value: '',
        callStatus: '',
        visible: false
      }
    },
    computed: {
      batch () {
        let temp = this.batchOperator
        for (let i = 0; i < temp.operator.length; i++) { // 饿了么组件不需要iconfont
          temp.operator[i].class = temp.operator[i].class === 'iconfont icon-shanchu' ? temp.operator[i].class : temp.operator[i].class + ' iconfont'
        }
        return temp
      }
    },
    methods: {
      handlerClick (action, enabled) { // 每一个批量动作
        if (enabled) {
          // enabled存在且为true时 按钮禁用
          if (action === 'batchAssign') {
            // 统计埋点
            window._hmt && window._hmt.push(['_trackEvent', '工单', '工单批量分配（不可点击状态的）'])
          }
          return
        }
        this.$emit(action)
        if (action === this.deteleAction) {
          this.visible = false
        }
      },
      checkNone () { // X关闭
        this.$emit('checkNone')
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .card-batch
    display: flex
    display: -webkit-flex
    align-items: center
    .option
      display: flex
      display: -webkit-flex
      align-items: center
  .batch
    display none
    align-items center
    width calc(100vw - 57px - 10px)
    height 40px
    padding-left 10px
    background rgba(255,255,255,1)
    position fixed
    z-index 1990
    border-top 1px solid #d5d5d5
    right 0
    bottom 0
    box-shadow 1px 3px 12px rgba(0,0,0,0.1)
    font-size 14px
    color $cf-level3
    .el-icon-close
      color $c-pink
      font-size: 14px
      font-weight: 700
  .batch.navMenuState
    width calc(100vw - 120px - 10px)
  .option-wrap
    margin-right 30px
    display flex
    line-height 40px
    .option.disabled
      color $cf-level3
      i
        color $cf-level3
      &:hover
        cursor not-allowed
        color $cf-level3
  .tooltip-icon
    padding-left 10px
    color $c-main
  .batchCancelLaterProcess
    color $c-main
</style>
